<template>
	<MainLayout>
		<view class="my-posts-page">
			<u-list>
				<u-list-item v-for="(item, index) in postList" :key="item.id">
					<up-swipe-action class="cardItem">
						<up-swipe-action-item v-model:show="show" :options="options"
							@click="handleSwipeAction(index,$event)">
							<view class="post-card">
								<view class="post-body">
									<view>
										<text class="label">类型：</text>{{ item.type }}
									</view>
									<view>
										<text class="label">出发地：</text>{{ item.departure }}
									</view>
									<view>
										<text class="label">目的地：</text>{{ item.destination }}
									</view>
									<view>
										<text class="label">出发时间：</text>{{ item.departureTime }}
									</view>
									<view>
										<text class="label">备注：</text>{{ item.remark || '无' }}
									</view>
									<view>
										<text class="label">创建时间：</text>{{ item.created_at }}
									</view>
								</view>

								<!-- 删除图标右上角 -->
								<view class="delete-icon" @click="deletePost(index)">
									<u-icon name="trash" color="#f56c6c" size="36rpx"></u-icon>
								</view>
							</view>
						</up-swipe-action-item>
					</up-swipe-action>
				</u-list-item>
			</u-list>

			<u-button type="primary" shape="circle" @click="loadMore" v-if="postList.length">加载更多</u-button>
		</view>
	</MainLayout>
</template>

<script>
	import api from '@/api'
	import MainLayout from '@/layouts/MainLayout.vue'

	export default {
		components: {
			MainLayout
		},
		data() {
			return {
				postList: [],
				lastId: "0",
				pageSize: 10,
				options: [{
					name: 'delete',
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}, {
					name: 'edit',
					text: '编辑',
					style: {
						backgroundColor: '#498EF7'
					}
				}]
			}
		},
		onShow() {
			this.resetList()
			this.loadMyPosts()
		},
		methods: {
			resetList() {
				this.postList = []
				this.lastId = "0"
			},
			async loadMyPosts() {
				try {
					const res = await api.journey.mine({
						lastId: this.lastId,
						pageSize: this.pageSize
					})
					if (res.code === 200 && res.data && Array.isArray(res.data.list)) {
						const newList = res.data.list.map(item => ({
							id: item.id,
							type: item.type === 'personFindCar' ? '人找车' : '车找人',
							departure: item.departure,
							destination: item.destination,
							departureTime: item.departure_time.slice(0, 10),
							remark: item.remark,
							created_at: item.created_at,
						}))
						this.postList = [...this.postList, ...newList]
						if (newList.length > 0) {
							this.lastId = newList[newList.length - 1].id
						}
					}
				} catch (err) {
					console.error('获取我的行程失败:', err)
				}
			},
			loadMore() {
				this.loadMyPosts()
			},
			handleSwipeAction(index, btnIndex) {
				const button = this.options[btnIndex.index] // 根据索引找到按钮对象
				if (!button) return
				if (button.name === 'delete') {
					this.deletePost(index)
				} else if (button.name === 'edit') {
					this.editPost(index)
				}
			},
			editPost(index) {
				const item = this.postList[index]
				uni.redirectTo({
					url: `/pages/publish/edit?journeyId=${item.id}`
				})
			},
			deletePost(index) {
				const item = this.postList[index]
				uni.showModal({
					title: '提示',
					content: '确定删除该发布记录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await api.journey.deleted({
									id: item.id
								})
								this.postList.splice(index, 1)
								uni.showToast({ title: '删除成功', icon: 'success' })
							} catch (err) {
								uni.showToast({ title: '删除失败', icon: 'error' })
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.my-posts-page {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.post-card {
		position: relative;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.post-body {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.label {
		font-weight: bold;
		margin-right: 10rpx;
	}

	/* 删除图标右上角 */
	.delete-icon {
		position: absolute;
		right: 16rpx;
		top: 16rpx;
	}

	.cardItem {
		margin: 20rpx;
	}
</style>